<template>
    <el-empty description="您还未登录" v-if="token == null"></el-empty>
    <div v-else>
        <el-row>
            <el-col :span="12">
                <el-card shadow="hover" @click="rese(subject_id = 2)">科目二预约</el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover" @click="rese(subject_id = 3)">科目三预约</el-card>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="12">
                <el-card shadow="hover">科目二买圈</el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover">科目三买圈</el-card>
            </el-col>
        </el-row>
    </div>

    <el-dialog v-model="dialogVisible" :modal="false" destroy-on-close>
        <el-form ref="formRef" style="max-width: 600px" :model="numberValidateForm" label-width="auto"
            class="demo-ruleForm">

            <el-form-item label="选择时间" prop="session" :rules="[
                { required: true, message: '请选择时间' },
            ]">
                <el-date-picker style="width: 240px" v-model="session" type="date" placeholder="选择日期"
                    format="YYYY/MM/DD" value-format="YYYY-MM-DD" :disabled-date="disabledDate"/>
            </el-form-item>

            <el-form-item label="选择车辆" prop="car" :rules="[
                { required: true, message: '请选择车辆' },
            ]">
                <el-select v-model="car" placeholder="请选择" style="width: 240px" clearable>
                    <el-option v-for="item in options_car.value" :key="item.car_id" :label="item.car_pai"
                        :value="item.car_id" :disabled="!item.car_state" />
                </el-select>
            </el-form-item>

        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">关闭</el-button>
                <el-button type="primary" @click="submit">
                    提交
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive } from 'vue';
import axios from 'axios';
const token = localStorage.getItem('token')
const dialogVisible = ref(false)
const car = ref('')
const options_car = ([])
const session = ref('')
const test_id=ref('')
// 表单判断数据是否为空
const numberValidateForm = reactive({
    car: car,
    session: session
})
const disabledDate = (time) => {
  // 获取今天 00:00:00 的时间戳
  const today = new Date();
  today.setHours(0, 0, 0, 0);
  
  // 禁用条件：选择的日期 <= 今天零点
  return time.getTime() <= today.getTime();
}
function rese(subject_id) {
    car.value = ''
    session.value = ''
    test_id.value=subject_id
    getdata()
    dialogVisible.value = true
}

function submit() {
    dialogVisible.value = false
    const data = ref({
        car_id:car.value,
        test_id:test_id.value,
        session:session.value,
        ground_id:1005
    })
    axios.post("http://127.0.0.1:8000/driver_school/train_add",data.value,
    {
    headers: {
    'Content-Type': 'application/json', // 关键头，必须设置
    token: token // 若有认证 token
  }
}

    )
    .then(res => {
        console.log(res)
    })
    .catch(err => {
        console.error(err); 
    })
}
function getdata() {
    axios.get("http://127.0.0.1:8000/driver_school/cars")
        .then(res => {
            console.log(res)
            options_car.value = res.data.data
        })
        .catch(err => {
            console.error(err);
        })
}
onMounted(() => {
    // Your code here

});

// 在组件卸载前执行的操作
onUnmounted(() => {
    // Your code here
});
</script>
<style>
.el-card {
    margin-right: 15px;
    margin-bottom: 20px;
}
</style>